<template>
  <div>
    <h1>

      <div style="margin: 10px 0">
        <el-input style="width: 200px" placeholder="请输入图书名称" suffix-icon="el-icon-search" v-model="bookName"></el-input>
        <el-input style="width: 200px" placeholder="请输入图书编号" suffix-icon="el-icon-message " class="ml-5" v-model="bookId"></el-input>
        <el-input style="width: 200px" placeholder="请输入作者" suffix-icon="el-icon-position" class="ml-5" v-model="author"></el-input>
        <el-button class="ml-5" type="primary " @click="load" >搜索</el-button>
        <el-button class="ml-5" type="warning " @click="reset" >重置</el-button>
      </div>

      <div style="margin: 10px 0">
        <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>

        <el-popconfirm
            class="ml-5"
            confirm-button-text='确定'
            cancel-button-text='我再想想'
            icon="el-icon-info"
            icon-color="red"
            title="确定删除吗？"
            @confirm="deleteBatch"
        >
          <el-button type="danger" slot="reference" class="mr-5">批量删除 <i class="el-icon-delete"></i></el-button>
        </el-popconfirm>
      </div>


      <el-table :data="tableData" border stripe :header-cell-class-name="headerBg"  @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="bookName" label="书名" width="140"></el-table-column>
        <el-table-column prop="bookId" label="图书编号" width="120"></el-table-column>
        <el-table-column prop="author" label="作者"></el-table-column>
        <el-table-column prop="bookType" label="图书类型"></el-table-column>
        <el-table-column prop="collectionTime" label="收藏时间"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>

            <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗？"
                @confirm="handleDelete(scope.row.id)"
            >
              <el-button type="danger" slot="reference">删除<i class="el-icon-delete"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div style="padding: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>

      <el-dialog title="图书信息" :visible.sync="dialogFormVisible" width="30%">
        <el-upload
            class="upload-demo"
            action="http://localhost:9090/file/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
          <el-button size="small" type="primary">上传封面</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

        </el-upload>
        <el-form label-width="80px" size="small">
          <el-form-item label="图书名" >
            <el-input v-model="form.bookName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图书编号" >
            <el-input v-model="form.bookId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="作者" >
            <el-input v-model="form.author" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图书类型" >
            <el-input v-model="form.bookType" autocomplete="off"></el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>

    </h1>
  </div>

</template>

<script>
import request from "@/utils/request";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Book",
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      bookName: "",
      collectionTime:"",
      bookId: "",
      author: "",
      bookType: "",
      form: {},
      dialogFormVisible:false,
      multipleSelection:[],
      headerBg: 'headerBg'



    }
  },
  created() {
    this.load();
  },
  methods: {


    handleAdd(){
      this.dialogFormVisible = true;
      this.form = {}
    },
    handleEdit(row){
      this.form = row;
      this.dialogFormVisible = true;
    },
    handleDelete(id){
      request.delete("/book/"+id).then(res => {
        if (res){
          this.$message.success("删除成功")
          this.load();
        }else {
          this.$message.error("删除失败")
        }
      })
    },
    handleSelectionChange(val){
      console.log(val);
      this.multipleSelection = val;
    },
    deleteBatch(){
      let ids = this.multipleSelection.map(item => item.id);
      request.post("/book/del/batch",ids).then(res =>{
        if (res){
          this.$message.success("批量删除成功")
          this.load();
        }else {
          this.$message.error("批量删除失败")
        }
      })

    },
    reset(){
          this.bookName = "",
          this.bookId = "",
          this.author = ""
      this.load();
    },
    load(){
      request.get("/book/page",{
        params:{
          bookId: this.bookId,
          author: this.author,
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          bookName:this.bookName,

        }
      }).then(res =>{

        console.log(res)
        this.tableData = res.records;
        this.total = res.total;

      })

    },
    save(){
      request.post("/book/save",this.form).then((res)=>{
        if (res){
          this.$message.success("插入成功")
          this.dialogFormVisible = false;
          this.load();
        }else {
          this.$message.error("插入失败")
        }
      })
    },
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum = pageNum;
      this.load()
    },
    handleSizeChange(pageSize){
      console.log(pageSize)
      this.pageSize = pageSize;
      this.load()
    }

  }



}

</script>

<style scoped>


</style>


